<!-- 压差曲线 -->
<template>
  <px-dialog v-model="dialogVisibleChart" title="查看曲线" width="80%">
    <div class="flex-center table-top analysisiLine">
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="时间范围" prop="date">
          <px-date-picker
            v-model="queryParams.date"
            type="datetimerange"
            :clearable="false"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            :disabled-date="disabledDateFn"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            @calendar-change="chooseDay = $event[0]"
          />
        </px-form-item>
        <div class="search-form-btn flexNowrap">
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
        </div>
      </px-form>
    </div>
    <div v-loading="tableLoading" class="chart-content">
      <div v-if="isShowEmpty" class="chart-content-empty">
        <px-empty class="px-empty-common" />
      </div>
      <div v-else ref="chartRef" class="chart-container" />
    </div>
    <div class="dialog-footer">
      <px-button type="primary" @click="handleClose">关闭</px-button>
    </div>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, computed } from "vue";
import { queryPointNumChart } from "@/api/modules/operation";
import * as echarts from "echarts";
import dayjs from "dayjs";
import { formatMissingData } from "@/utils/common";

defineOptions({
  name: "GAS_CONSUMPTION_SPECIALGAS_ANALYSIS"
});

const isShowEmpty = ref(true);
const emits = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  pointNum: {
    type: Array,
    default: () => []
  }
});
const { visible, pointNum } = toRefs(props);
const dialogVisibleChart = computed({
  get: () => visible.value,
  set: val => emits("update:visible", val)
});
const formRef = ref(null);
const queryParams = reactive({
  date: [dayjs().subtract(24, "hour").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")]
});
// const chartsList = ref([]);
const tableLoading = ref(false);

const chooseDay = ref(null);

const disabledDateFn = date => {
  if (!chooseDay.value) {
    return false;
  }
  const after3Days = dayjs(date).isAfter(dayjs(chooseDay.value).add(2, "day"));
  const before3Days = dayjs(date).isBefore(dayjs(chooseDay.value).subtract(2, "day"));
  return after3Days || before3Days;
};

onMounted(() => {
  handleQuery();
});
// 查询
const handleQuery = async () => {
  try {
    chooseDay.value = null;
    tableLoading.value = true;
    const { date } = queryParams;
    const params = {
      startTime: date === "" ? "" : date[0],
      endTime: date === "" ? "" : date[1],
      pointList: pointNum.value,
      timePeriod: "hour"
    };
    const res = await queryPointNumChart(params);
    if (res?.length > 0) {
      isShowEmpty.value = false;
      nextTick(() => {
        drawLineChart(res);
      });
    } else {
      isShowEmpty.value = true;
    }
  } catch (err) {
    console.log(err);
  } finally {
    tableLoading.value = false;
  }
};

// 重置
const resetQuery = () => {
  isShowEmpty.value = true;
  formRef.value.resetFields();
  chooseDay.value = null;
  queryParams.date = [dayjs().subtract(24, "hour").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")];
  handleQuery();
};
const chartRef = ref(null);
const drawLineChart = valueList => {
  const filterList = valueList.filter(v => {
    return v.formatPointValues?.length > 0;
  });
  if (filterList.length < 0) {
    return;
  }
  const xAxisList = filterList[0]?.formatPointValues?.map(v => {
    return v.name;
  });
  const pointUnit = filterList[0]?.pointUnit;
  let legendList = [];
  const seriesObj = filterList?.map(v => {
    if (v.indicatorName) {
      legendList.push(v.indicatorName);
    }
    return {
      data: formatMissingData(v.formatPointValues?.map(v => v.num) || []),
      type: "line",
      name: v.indicatorName || ""
    };
  });
  let myChart = echarts.init(chartRef.value);
  const min = value => {
    if (value.min < 0) {
      return Math.round(value.min * 1.5);
    } else {
      return 0;
    }
  };
  const max = value => {
    return Math.round(value.max * 1.5);
  };
  let option = {
    title: {
      text: "压差曲线",
      left: "center",
      top: "10"
    },
    tooltip: {
      show: true,
      trigger: "axis"
    },
    legend: {
      show: true,
      type: "plain",
      left: "right",
      data: legendList
    },
    // dataZoom: [
    //   { show: true, realtime: true, start: 30, end: 60 },
    //   { type: "inside", realtime: true, start: 30, end: 60 }
    // ],
    grid: {
      left: 50,
      right: 40,
      top: 60,
      bottom: 60,
      containLabel: true
    },
    toolbox: {
      top: 20,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      show: true,
      type: "category",
      data: xAxisList
    },
    yAxis: {
      show: true,
      type: "value",
      name: pointUnit,
      min,
      max
    },
    dataZoom: [
      {
        type: "slider",
        orient: "vertical",
        filterMode: "none",
        left: 0,
        start: 0,
        end: 100
      },
      {
        type: "inside",
        orient: "vertical",
        filterMode: "none",
        start: 0,
        end: 100
      },
      {
        type: "slider",
        orient: "horizontal",
        filterMode: "none",
        start: 0,
        end: 100
      },
      {
        type: "inside",
        orient: "horizontal",
        filterMode: "none",
        start: 0,
        end: 100
      }
    ],
    series: seriesObj
    // series: [
    //   {
    //     data: valueList.value.map(v => v.value),
    //     type: "line"
    //   }
    // ]
  };
  nextTick(() => {
    myChart.setOption(option);
  });
};
//关闭
const handleClose = () => {
  dialogVisibleChart.value = false;
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");

.analysisiLine {
  :deep(.px-form-item) {
    width: 100%;
  }

  .flexNowrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.chart-content {
  width: 100%;
  height: 500px;

  .chart-content-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .chart-container {
    width: 100%;
    height: 100%;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
